// FontSizeAdaptor.vue
<template>
  <div ref="root"></div>
</template>

<script>
export default {
  name: 'FontSizeAdaptor',
  mounted() {
    this.updateFontSize();
    window.addEventListener('resize', this.updateFontSize);
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.updateFontSize);
  },
  methods: {
    updateFontSize() {
      const screenWidth = window.innerWidth;
      const fontSize = this.calculateFontSize(screenWidth);
      document.documentElement.style.fontSize = `${fontSize}px`;
    },
    calculateFontSize(screenWidth) {
      // 根据屏幕宽度计算字体大小
      const baseFontSize = 16; // 基础字体大小
      const minScreenWidth = 768; // 最小屏幕宽度
      const maxScreenWidth = 1920; // 最大屏幕宽度
      const minFontSize = 16; // 最小字体大小
      const maxFontSize = 24; // 最大字体大小

      // 计算字体大小
      let fontSize = baseFontSize;

      if (screenWidth >= minScreenWidth && screenWidth <= maxScreenWidth) {
        fontSize = Math.min(
          maxFontSize,
          minFontSize + (screenWidth - minScreenWidth) * (maxFontSize - minFontSize) / (maxScreenWidth - minScreenWidth)
        );
      }

      return fontSize;
    },
  },
};
</script>
